<template>
	<view>
		<view class="list" v-if="list.length">
			<view class="item" v-for="(item, index) in list" :key="index">
				<image class="avatar" :src="/^[http | https]/.test(item.avater) ? item.avater : ($imgUrl +item.avater) " mode=""></image>
				<view class="info">
					<view class="como">
						<view class="l-w name">{{item.name}}</view>
						<view class="r-w money">+ ￥{{item.money}}</view>
					</view>
					<view class="como cen">
						<!-- <view class="l-w c666">购买某某商品花费￥{{item.originMoney}}</view> -->
						<view class="r-w date">佣金贡献</view>
					</view>
					<view class="como">
						<view class="l-w date">时间：{{item.time}}</view>
						<view class="r-w"></view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="nodata" v-else>这里还木有数据哈~~</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [1],
				page: {
					pageNum: 1,
					totalPageNum: 1,
					pageSize: 10,
				},
			};
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.page.pageNum = 1
			this.getList()
		},
		onReachBottom() {
			if (this.page.pageNum >= this.page.totalPageNum) return
			this.page.pageNum++
			this.getList()
		},
		methods: {
			getList() {
				this.$http.get(this.$api.commissionList, {
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize
				}).then(res => {
					if (res.code === 200) {
						uni.stopPullDownRefresh()
						this.page.totalPageNum =  Math.ceil(res.data.total / this.page.pageSize)
						this.list = this.page.pageNum == 1 ? res.data.result : [...this.list, ... res.data.result]
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.list {
	.item {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		.date {
			color:#999;
			font-size: 22rpx;
		}
		.name {
			font-size: 30rpx;
		}
		.c666 {
			color: #666;
		}
		.money {
			font-size: 28rpx;
			color: #FF4A37;
		}
		.cen {
			margin: 10rpx 0;
		}
		.avatar {
			height: 56rpx;
			width: 56rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
		.info {
			flex: 1;
			.como {
				display: flex;
				justify-content: space-between;
			}
		}
	}
}
.nodata {
	text-align: center;
	color: #999;
	margin: 100rpx auto;
}
</style>
